<template>
    <div class="contain" ref="appRef">
        <div class="top-title">

            <div class="top-title-text" @click="goToHome">
                智慧广电综合公服信息管理平台-龙泉驿区
            </div>
            <div class="tab-box">
                <div :class="tabActiveIndex == tabIndex ? 'tab-item tab-active':'tab-item'"
                     v-for="(tabItem,tabIndex) in tabItemList" :key="tabIndex"
                     @click="changeTabItem(tabIndex)">
                    {{tabItem}}
                </div>
            </div>
        </div>
        <div style="position: absolute;width: 100%;height: 0px;top: 94px;z-index: 999;">

        </div>
        <screen-town  v-if="tabActiveIndex == 0"></screen-town>
        <party-building  v-if="tabActiveIndex == 1"></party-building>
        <production  v-if="tabActiveIndex == 2"></production>
        <manager v-if="tabActiveIndex == 3"></manager>
        <div class="tip-continer" v-if="tipShow">
            <div class="tip-top" @click="closeTip()">
                <div class="tip-text"></div>
                <div class="tip-close"></div>
            </div>
            <div class="tip-list">
                <div
                        class="tip-item"
                        v-for="(item, index) in platformList"
                        :key="index"
                        @click="minItemClick(item)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {useIndex} from "../../utils/utilsDramAdmin.js";
    import screenTown from './components/bigScreenHome'
    import partyBuilding from "./components/partyBuilding"
    import manager from "./components/manage"
    import production from "./components/production"
    import dateutil from "@/common/dateutil";


    export default {
        name: "screenMain",
        data() {
            return {
                tabActiveIndex: 0,
                tabItemList: [
                    "首页", "应急广播", "雪亮工程", "公共服务",
                ],
                tipShow: false,
                platformList: [
                    {
                        name: "大面街道",
                        path: "/screenTownMain"
                    }, {
                        name: "百工堰社区",
                        path: "/screenShuangQiMain"
                    },
                ],
                nowTimeStr: "",
                nowDateStr: ""
            };
        },
        beforeDestroy() {
            clearTimeout(this.interVal)
        },
        components: {
            partyBuilding,
            manager,
            production,
            screenTown
        },
        mounted() {
            const {calcRate, windowDraw} = useIndex(this.$refs.appRef);
            calcRate();
            windowDraw();
            let date = new Date();
            this.nowDateStr = date.format('yyyy年MM月dd日');
            this.getTimeCurrDate();

        },
        methods: {
            goToHome() {
                this.$router.push({
                    path: "/home",
                });
            },
            openTip() {
                this.tipShow = true;
            },
            minItemClick(item) {
                this.$router.push({
                    path: item.path
                })
            },
            closeTip() {
                this.tipShow = false;
            },
            changeTabItem(tabIndex) {
                this.tabActiveIndex = tabIndex;
            },
            getTimeCurrDate() {
                let date = new Date();
                let currtime = date.getTime();
                this.nowTimeStr = date.format('hh:mm:ss');
                this.addTimeCurr(currtime);
            },
            addTimeCurr(currtime) {
                // 定时器延时一秒（在上面先格式化日期，显示后再开启定时器）
                this.interVal = setInterval(() => {
                    currtime += 1000;
                    let updateDate = new Date(currtime);
                    this.nowStr = updateDate.format('yyyy-MM-dd hh:mm:ss');
                    this.nowTimeStr = updateDate.format('hh:mm:ss');
                }, 1000);
            },
        }
    }
</script>

<style lang="less" scoped>
    @import "../../views/bigScreen/font.less";

    .contain {
        overflow: hidden;
        width: 1920px;
        height: 1080px;
        transform: scale(var(--scale)) translate(-50%, -50%);
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
        /*background-image: url("../../assets/bigScreenHome/zhen_bg_image.png");*/
        background: url("../../assets/bigScreenHome/contain-bg.png");
        //background-size: 100%;
        color: white;
    }


    .top-title {
        width: 100%;
        height: 110px;
        background-image: url("../../assets/bigScreenHome/pageBigHome_top.png");
        background-size: 102%;
        background-position: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .top-title-text {
        font-family: YouSheBiaoTiHei;
        font-style: normal;
        font-weight: normal;
        font-size: 38px;
        margin-bottom: 30px;
        line-height: 30px;
        text-align: center;
        margin-left: 30px;
        background: linear-gradient(to top, #87DAFF, #FFFFFF);
        -webkit-background-clip: text;
        color: transparent;
        cursor: pointer;
    }


    .tab-box {
        width: 777px;
        height: 47px;
        margin-bottom: 45px;
        //border-radius: 32px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 220px;
        //border: 1px solid rgba(108, 246, 255, 0.8)
    }

    .tab-item {
        width: 160px;
        height: 47px;
        line-height: 47px;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        background-image: url("../../assets/bigScreenHome/nav-item-bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .tab-active {
        //background: radial-gradient(50% 18631.39% at 50% 50%, rgba(81, 255, 234, 0.4) 0%, rgba(40, 3, 78, 0.16) 100%);
        //outline: 1px solid rgba(81, 255, 234, 0.4);
        background-image: url("../../assets/bigScreenHome/nav-item-bg-active.png");
    }

    .tip-continer {
        width: 869px;
        height: 600px;
        position: absolute;
        top: 232px;
        left: 540px;
        z-index: 100;
        background: rgba(13, 25, 41, 88%);
        border: 1px solid #8EDDFF;
        border-radius: 8px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .tip-top {
        padding-top: 32px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }

    .tip-list {
        display: flex;
        flex-wrap: wrap;
                padding-left: 50px;
        padding-right: 50px;
        justify-content: space-between;
        align-items: center;
    }

    .tip-text {
        font-size: 28px;
        line-height: 24px;
        margin-top: 24px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #ffffff;
    }

    .tip-close {
        width: 36px;
        height: 36px;
        cursor: pointer;
        background-image: url("../../assets/bigScreenHome/close_icon.png");
        background-size: 100%;
    }

    .tip-item {
        width: 165px;
        height: 90px;
        font-family: YouSheBiaoTiHei;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        margin-bottom: 16px;
        line-height: 90px;
        text-align: center;
        color: #ffffff;
        margin-right: 16px;
        background-image: url("../../assets/bigScreenHome/tip_item_bg.png");
        background-size: 100%;
        cursor: pointer;
    }

    .tip-item:nth-child(5n) {
        margin-right: 0px;
    }

</style>
